{% extends 'base.html' %}
{% block title %}查询订单{% endblock %}
{% block content %}
<div class="container">
  <!-- 删除对话框 -->
  <div class="modal fade" id="order_delete_modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="alert alert-danger alert-dismissible fade in">
          <h4>您确认删除？</h4>
          <p>**删除这条记录就真删除了**</p>
          <p style="text-align:center">
            <button type="button" class="btn btn-danger">确认删除</button>
            <button type="button" class="btn btn-default">取消</button>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹出对话框 -->
  <div class="modal fade" id="order_modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">添加订单</h4>
        </div>
        <div class="modal-body">
         <form id="addOrderForm">
           <div class="row">
             <div class="col-md-6 col-sm-6">
               <div class="form-group">
                 <label for="title">名称</label>
                 <input type="text" id="title" name="title" class="form-control"/>
                 <span class='error-msg' style="color:red"></span>
               </div>
             </div>
             <div class="col-md-6 col-sm-6">
               <div class="form-group">
                 <label for="price">价格</label>
                 <input type="text" id="price" name="price" class="form-control"/>
                 <span class='error-msg' style="color:red"></span>
               </div>
             </div>
             <div class="col-md-6 col-sm-6">
               <div class="form-group">
                 <label for="status">状态</label>
                 <select id="status" name="status" class="form-control">
                   <option value="">--请选择--</option>
                   <option value="1">待支付</option>
                   <option value="2">已支付</option>
                 </select>
                 <span class='error-msg' style="color:red"></span>
               </div>
             </div>
             <div class="col-md-6 col-sm-6">
               <div class="form-group">
                 <label for="empno">用户</label>
                 <select id="empno" name="empno" class="form-control">
                   <option value="">--请选择--</option>
                   {% for emp in emp_list %}
                   <option value="{{emp.empno}}">{{emp.ename}}</option>
                   {% endfor %}
                 </select>
                 <span class='error-msg' style="color:red"></span>
               </div>
             </div>
           </div>
         </form>
        </div>
        <div class="modal-footer">
          <button type="button" id="orderSaveBtn" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>

  <div>
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#order_modal">添加订单</a>
  </div>
  <div class="panel panel-default" style="margin-top: 20px;">
    <div class="panel-heading" style="background-color: #ff6b81; color: white;">
      <span class="glyphicon glyphicon-th-list"></span> 订单信息列表
    </div>
    <div class="panel-body" style="background-color: #fff0f5;">
      <table class="table table-bordered table-striped table-hover">
        <thead style="background-color: #ffe4e1;">
        <tr>
          <th>订单编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for order in order_list %}
        <tr>
          <td>{{order.orderid}}</td>
          <td>{{order.title}}</td>
          <td>{{order.price}}</td>
          <td>{{order.get_status_display}}</td>
          <td>
            <a href="{% url 'order_update' %}?id={{order.id}}" class="btn btn-xs btn-success">修改</a>
            <a href="{% url 'order_delete' %}?id={{order.id}}" class="btn btn-xs btn-danger btn-delete">删除</a>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {{ page_str }}
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
  $(function(){
    // 删除按钮注册点击事件
    $(".btn-delete").click(function(e){
      e.preventDefault();
      $("#order_delete_modal").modal('show');
    });

    // 保存订单按钮注册点击事件
    $("#orderSaveBtn").click(function(){
      var datas = $('#addOrderForm').serialize();
      // 清空之前错误消息
      $('.error-msg').empty();
      $.get('{% url 'order_add' %}', datas, function(datas){
        if(!datas.status){
          $.each(datas.errors, function(i, e){
            $("#"+i).next().text(e);
          });
        } else {
          $('#order_modal').modal('hide');
          location.reload();
        }
      });
    });
  });
</script>
{% endblock %}
